import { reactive } from "vue"
import { FooterBar, NaviInter, SearchItem, CloseIcon, SeachBar, Home, Document, DocumentHome } from "./inter.d";

function initNavi() {
    const content: Array<NaviInter> = []
    const logo: NaviInter = {}
    const searchBarTaggle: NaviInter = {}
    const searchBarInput: NaviInter = {}
    const search: SearchItem = {}
    const closeIcon: CloseIcon = {}
    const searchBarList: Array<NaviInter> = []
    const searchBar: SeachBar = {
        searchBarInput,
        closeIcon,
        searchBarList
    }
    const naviItem = {
        logo,
        content,
        search,
        navigatorBarContainerStyle: '',
        navigatorBarStyle: '',
        searchBar,
        searchBarTaggle
    }
    return naviItem
}

function initFooter() {
    const footerBar: FooterBar = {
        count: 0,
        name: '',
        toggleBoxes: {
            type: '',
            style: ''
        },
        simple: {
            name: ''
        },
        footerBarContainerStyle: '',
        footerBarStyle: '',
        complex: {
            name: '',
            block1: {
                path: '',
                icon: '',
                text: '',
                style: '',
                imgStyle: ''
            },
            block2: {
                path: '',
                style: '',
                icon: '',
                iconStyle: '',
                navsStyle_Desktop: '',
                navItemUlStyle_Desktop: '',
                navItemTitleStyle_Desktop: '',
                naviItemListStyle_Desktop: '',
                navsStyle_Phone: '',
                navItemUlStyle_Phone: '',
                navItemTitleStyle_Phone: '',
                naviItemListStyle_Phone: '',
                naviItemLableStyle: '',
                navs: [],
                NavItemToggleMenuStyle: ''
            },

        },
        copyright: {
            name: '',
            text: '',
            copyrightContainerStyle: '',
            copyrightStyle: '',
            linksUlStyle: '',
            linksItemsStyle: '',
            links: []
        }
    }
    return footerBar
}

function initHome() {
    const home: Home = {
        top_img: '',
        headerContainerStyle: '',
        headerStyle: '',
        menzhenbu: [],
        keshi: {
            title: '',
            contents: []
        },
        dinyue: {
            title: '',
            image: '',
            placeHolder: '',
            button: ''
        },
        products: {
            title: '',
            items: []
        },
        breadCurb: ''
    }
    return home
}
function initDocument() {
    const document: Document = {
        topView: {
            image: '',
            icon: '',
            title: '',
            placeHolder: '',
            search: true
        },
        subjects: [],
        support: {
            image: '',
            linkText: '',
            path: '',
            subtitle: '',
            title: ''
        },
        breadCurb: ''
    }
    return document
}

function initDocumentHome() {
    const documentHome: DocumentHome = {
        topView: {
            image: '',
            icon: '',
            title: '',
            placeHolder: '',
            search: false
        },
        support: {
            image: '',
            linkText: '',
            path: '',
            subtitle: '',
            title: ''
        },
        breadCurb: '',
        firstTopics: [],
        secondTopic: {
            title: '',
            topics: []
        },
        thirdTopic: {
            title: '',
            topics: []
        },
        lastTopic: [],
        moreTopic: {
            icon: '',
            linkText: '',
            link: '',
            title: ''
        },
        search: {
            title: '',
            placeHolder: '',
            icon: ''
        },
        topicStyle: []
    }
    return documentHome
}

interface TopicDoc {
    chapter: string,
    classify: string,
    content: string,
    id: string,
    title: string,
    to: string,
    topic: string,
    ishot: boolean
}
function initTopicDoc() {
    const topicDoc = {
        chapter: '',
        classify: '',
        content: '',
        id: '',
        title: '',
        to: '',
        topic: '',
        ishot: false
    }
    return topicDoc
}

const hotData: Array<TopicDoc> = []

export const state = reactive({
    naviBar: initNavi(),
    footerBar: initFooter(),
    home: initHome(),
    document: initDocument(),
    documentHome: initDocumentHome(),
    topicDoc: initTopicDoc(),
    hotData,
    totalNum: 0,
    weChat: {
        link: ''
    }
})


interface SearchData {
    title: string, 
    id: string, 
    to: string
}
export interface Search {
    inputData: string,
     flag: boolean, 
     lock: boolean, 
     searchData: Array<SearchData>
}

export const search:Search = reactive({
    inputData: '',
    flag: false,
    lock: true,
    searchData: []
})

export interface ContextData {
    name: string,
    titles: Array<string>,
    to: Array<string>,
    id: Array<string>
}
const contextData:Array<ContextData> = []

export const context = reactive({
    contextData,
    flag: false
})

export const params = reactive({
    id: '',
    topic: ''
})

export const news:{document:{content:string,name:string,coverimg:string,to:string,date:number, id: string}[]} = reactive({
    document: []
})
